<template>
    <div class="Response-block-style">
        <div class="Response-block">
            <div class="Response-name">常规</div>
            <div class="Response-text">
                <div class="Response-line">
                    <span class="Response-label">Request URL: </span>{{general.url}}
                </div>
                <div class="Response-line">
                    <span class="Response-label">Request Method: </span>{{general.type}}
                </div>
                <div class="Response-line">
                    <span class="Response-label">Status Code: </span>{{general.code}}
                </div>
            </div>
        </div>
        <div class="Response-block">
            <div class="Response-name">请求头部</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index) in request" :key="index">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
        <div class="Response-block" v-if="response.length">
            <div class="Response-name">响应头部</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index2) in response" :key="index2">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
        <div class="Response-block" v-if="search.length">
            <div class="Response-name">url 参数</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index3) in search" :key="index3">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
        <div class="Response-block" v-if="body.length">
            <div class="Response-name">body 参数</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index4) in body" :key="index4">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
        <div class="Response-block" v-if="formData.length">
            <div class="Response-name">formData 参数</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index5) in formData" :key="index5">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            general: {
                type: '',
                url: '',
                code: '',
            },
            request: [],
            response: [],
            body: [],
            search: [],
            formData: [],
        }
    },
    methods: {
        setData(data, body, search, res) {
            this.general.url = data.uri.href;
            this.general.type = data.method;
            this.request = [];
            for (const key in data.headers) {
                if (data.headers.hasOwnProperty(key)) {
                    const element = data.headers[key];
                    this.request.push({
                        key: key,
                        value: element
                    });
                }
            };
            this.response = [];
            if (res) {
                for (const key in res.headers) {
                    if (res.headers.hasOwnProperty(key)) {
                        const element = res.headers[key];
                        this.response.push({
                            key: key,
                            value: element
                        });
                    }
                };
                this.general.code = res.statusCode + ' ' + res.statusMessage;
            };



            this.body = [];
            if (data.method != 'GET' && !data.formData) {
                for (const key in body) {
                    if (body.hasOwnProperty(key)) {
                        const element = body[key];
                        this.body.push({
                            key: key,
                            value: element
                        });
                    }
                };
            };


            this.search = [];
            for (const key in search) {
                if (search.hasOwnProperty(key)) {
                    const element = search[key];
                    this.search.push({
                        key: key,
                        value: element
                    });
                }
            };
            this.formData = [];
            if (data.formData) {
                for (const key in data.formData) {
                    if (data.formData.hasOwnProperty(key)) {
                        const element = data.formData[key];
                        this.formData.push({
                            key: key,
                            value: element
                        });
                    }
                };
            };

        },
    },
}
</script>
<style scoped>
    .Response-name { color: #666; font-size: 12px; padding: 3px 0 3px 0; }
    .Response-text { border-bottom: 1px solid #dedede; font-size: 12px; padding: 0 10px 5px 10px; }
    .Response-block-style { padding: 10px; }
    .Response-line { padding: 3px 0;  color: #666; word-break:break-all; word-wrap:break-word; font-family: consola !important;}
    .Response-label { font-weight: bold;}
    .Response-block-style .Response-block:last-child  .Response-text { border : none}
</style>